<template>
	<div class="container">
		<div class="header">
			<div class="header_1">
				<el-row :gutter="20">
					<el-col :sm="24" :md="12" :lg="12" :xl="12">
						<el-card class="box-card">
							<template #header>
								<div class="card-header">
									<span>选择属性<el-button @click="centerDialogVisible = true" style="margin-left: 5px;"
											icon="EditPen" size="small">修改</el-button></span>
									<el-checkbox class="check_all" v-model="checkAllHeader"
										:indeterminate="isIndeterminateHeader" @change="handleCheckAllChangeHeader"
										border>全选</el-checkbox>
								</div>
							</template>
							<el-checkbox-group :min='1' :max="5" v-model="checkedHeader"
								@change="handleCheckedHeaderChange">
								<el-checkbox style="margin-bottom: 5px;" v-for="(item,index) in headers" :key="item"
									:label="index" border>
									{{item['zh']}}
								</el-checkbox>
							</el-checkbox-group>
						</el-card>
					</el-col>
					<el-col :sm="24" :md="12" :lg="12" :xl="12">
						<el-card class="box-card">
							<template #header>
								<div class="card-header">
									<span>选择尺码
										<el-radio-group v-model="sizeType" @change="sizeTypeChange" size="small"
											style="margin-left: 5px;">
											<el-radio-button label="clothSize">服装尺码</el-radio-button>
											<el-radio-button label="childSize">童装</el-radio-button>
											<el-radio-button label="shoseSize">鞋码</el-radio-button>
										</el-radio-group>
									</span>
									<el-checkbox class="check_all" v-model="checkAllSize"
										:indeterminate="isIndeterminateSize" @change="handleCheckAllChangeSize"
										border>全选</el-checkbox>

								</div>
							</template>
							<el-checkbox-group :min='1' v-model="checkedSize" @change="handleCheckedSizeChange">
								<el-checkbox v-for="(item,index) in sizesValue" :key="index" :label="item.size"
									border>{{item.size}}
								</el-checkbox>
							</el-checkbox-group>
						</el-card>
					</el-col>
				</el-row>
			</div>
			<div class="header_2">
				<el-row :gutter="20">
					<el-col :sm="24" :md="12" :lg="12" :xl="12">
						<el-card class="box-card">
							<template #header>
								<div class="card-header">
									<span>选择语言</span>
									<el-checkbox class="check_all" v-model="checkAllLanguage"
										:indeterminate="isIndeterminateLanguage" @change="handleCheckAllChangeLanguage"
										border>全选</el-checkbox>
								</div>
							</template>
							<el-checkbox-group :min='1' v-model="checkedLanguage" @change="handleCheckedLanguageChange">
								<el-checkbox v-for="(item,index) in languageList" :key="index" :label="index" border>
								{{item.name}}
								</el-checkbox>
							</el-checkbox-group>
						</el-card>
					</el-col>
					<el-col :sm="24" :md="12" :lg="12" :xl="12">
						<el-card class="box-card" header="批量操作" id="set_data">
							<template #header>
								<div class="card-header">
									<span>批量操作<el-button @click="reset" style="margin-left: 5px;" icon="Refresh"
											size="small">刷新页面</el-button></span>
									<el-radio-group v-model="radio" @change="rodioChange">
										<el-radio-button label="单值" />
										<el-radio-button label="范围值" />
									</el-radio-group>
								</div>
							</template>
							<el-row :gutter="2">
								<el-col :sm="24" :md="12" :lg="5" :xl="4">
									<el-select @change="setSelect" v-model="value_1" class="m-2" placeholder="选择属性">
										<el-option v-for="(item,key) in headersList" :key="key" :label="item['zh']"
											:value="key" :disabled="item['disabled']">
											<span style="float: left">{{ item['zh'] }}</span>
											<span style="float: right;" v-if="item['isSet']"><el-icon><Select
														color="#44ce00" /></el-icon></span>
										</el-option>
									</el-select>
								</el-col>
								<el-col :sm="24" :md="12" :lg="6" :xl="4">
									<el-input v-model="value_2" placeholder="请输入数字" type="number">
										<template #prepend>
											<el-icon color="#ff0000">
												<TopRight />
											</el-icon>
											初始值</template>
									</el-input>
								</el-col>
								<el-col :sm="24" :md="12" :lg="6" :xl="4" v-if="showRangeValue">
									<el-input v-model="value_3" placeholder="请输入数字" type="number">
										<template #prepend><el-icon color="#4d9ae7">
												<BottomRight />
											</el-icon>初末值</template>
									</el-input>
								</el-col>
								<el-col :sm="24" :md="12" :lg="8" :xl="6">
									<el-input v-model="value_4" placeholder="请输入数字" type="number">
										<template #prepend>

											<el-select v-model="v4_select" placeholder="Select"
												style="width: 125px;margin: 0 -5px;">
												<template #prefix>
													<el-icon color="#42c600">
														<Sort />
													</el-icon>
												</template>
												<el-option label="阶梯递增" value="ladder" />
												<el-option label="交替递增" value="alternately" />
											</el-select>
										</template>
									</el-input>
								</el-col>
								<el-col :sm="24" :md="12" :lg="6" :xl="3">
									<el-row :gutter="2">
										<el-col :span="14" v-if="isUnit">
											<el-select v-model="value_5" class="unit_select">
												<el-option v-for="item in v5_select['weight']" :key="item.value"
													:label="item.name" :value="item.value"></el-option>
											</el-select>
										</el-col>
										<el-col :span="6">
											<el-button type="primary" @click="setBtnClick" icon="Setting">设置</el-button>
										</el-col>
									</el-row>

								</el-col>
							</el-row>
						</el-card>
					</el-col>
				</el-row>
			</div>
			<div class="header_3">
				<el-row class="mb-4">
					<el-button type="primary" v-for="(item,index) in languageList" v-show="showLanguage[index]"
						@click="generateImages(item.id)">{{item.name}}-下载</el-button>
					<el-button type="danger" @click="allDownload">全部下载</el-button>
				</el-row>
			</div>
		</div>
		<div class="main">
			<el-card class="box-card">
				<template #header>
					<el-row :gutter="5" class="card-header_1">
						<el-col :sm="6" :md="4" :lg="3" :xl="2">
							<el-select @change="tableSelectChange" v-model="headerSelectValue" placeholder="选择表格"
								clearable>
								<el-option v-for="(item,index) in languageList" :key="item.id" :label="item.name"
									:value="item" :disabled="!showLanguage[index]"></el-option>
							</el-select>
						</el-col>
						<el-col :sm="6" :md="4" :lg="3" :xl="2">
							<div class="card-header-child">
								<el-input @change="tableStyleChange" v-model="tableBJ" type="color"
									style="width: 140px;">
									<template #prepend>表头背景</template>
								</el-input>
							</div>
						</el-col>
						<el-col :sm="6" :md="4" :lg="3" :xl="2">
							<div class="card-header-child">
								<el-input @change="tableStyleChange" v-model="tableFontColor" type="color"
									style="width: 160px;">
									<template #prepend>表头字体颜色</template>
								</el-input>
							</div>
						</el-col>
						<el-col :sm="6" :md="4" :lg="2" :xl="2">
							<div style="margin-left: 25px;">
								<span>开启提示</span>
								<el-switch @change="tableStyleChange" class="header-child_2" v-model="tableTips"
									style="margin-left: 2px" inline-prompt :active-icon="Check"
									:inactive-icon="Close" />
							</div>
						</el-col>
						<el-col :sm="6" :md="4" :lg="2" :xl="2">
							<div>
								<span>开启图片</span>
								<el-switch @change="tableStyleChange" class="header-child_2" v-model="tableImg"
									style="margin-left: 2px" inline-prompt :active-icon="Check"
									:inactive-icon="Close" />
							</div>
						</el-col>
						<el-col :sm="6" :md="4" :lg="2" :xl="2">
							<div>
								<span>开启水印</span>
								<el-switch @change="tableWatermarkStateChange" class="header-child_2"
									v-model="tableWatermark" style="margin-left: 2px" inline-prompt :active-icon="Check"
									:inactive-icon="Close" />
							</div>
						</el-col>
						<el-col :sm="6" :md="4" :lg="2" :xl="2">
							<div class="card-header-child">
								<el-button type="primary" @click="drawer=true">水印设置</el-button>
							</div>
						</el-col>
					</el-row>
				</template>
				<el-row :gutter="10" id="row_main">
					<el-col :sm="24" :md="24" :lg="13" :xl="12" v-for="(item,index) in languageList"
						v-show="showLanguage[index]">
						<p class="alert_p">{{item.name}}</p>
						<div class="main_1 table_main" :id="item.id">
							<p>
								✨{{ item.title }}✨
							</p>
							<el-table :data="sizeList" style="width: auto;margin-bottom: 5px;border-radius: 25px;border-bottom: 1px solid black;"
								@cell-dblclick="openEditColumn"  border
								:header-cell-style="{ textAlign: herderCss[index].textAlign,color:herderCss[index].fontColor,backgroundColor: herderCss[index].backgroundColor}"
								:cell-style="{ textAlign: 'center',color:'black'}" row-key="size" :key="Math.random()">
								<el-table-column v-for="(value, key) in headersList" :prop="key"
									:min-width="value[index].length>19 ? 60:50">
									<template #header>
										<span style="word-break: keep-all;">{{value[index]}}</span>
									</template>
									<template #default="scope" v-if="!value['childShow'][index]">
										<span v-if="!scope.row.isEdit">{{ scope.row[key] }}</span>
										<el-input @keyup.enter.native="editColumnData(scope.row)"
											v-if="scope.row.isEdit" size="small" v-model="scope.row[key]"></el-input>
									</template>
									<el-table-column min-width="60" v-if="value['childShow'][index]">
										<template #header>
											<span>{{value['children'][0]}}</span>
										</template>
										<template #default="scope">
											<span v-if="!scope.row.isEdit">{{ scope.row[key] }}</span>
											<el-input @keyup.enter.native="editColumnData(scope.row)"
												v-if="scope.row.isEdit" size="small"
												v-model="scope.row[key]"></el-input>
										</template>
									</el-table-column>
									<el-table-column min-width="60" v-if="value['childShow'][index]">
										<template #header>
											<span>{{value['children'][1]}}</span>
										</template>
										<template #default="scope">
											<span>{{ unitConversion(scope.row[key],value['children'][0]) }}</span>
										</template>
									</el-table-column>
								</el-table-column>
							</el-table>
							<div v-if="index == 'tw'">
								<el-card class="box-card"  shadow="never"  v-if="item.tipsShow"  style="margin-bottom: 5px;background-color: #fbfbfb;">
								    <template #header>
								      <div class="card-header">
								        <span>溫馨提示</span>
								      </div>
								    </template>
									<div>
											<p class="alert_p" v-for="(t,i) in item.tipsText">{{i+1}}. {{t}}</p>
									</div>
								  </el-card>
								<el-image v-if="item.imgShow && item.imgUrl" style="width: 100%; height: 160px"
									:src="item.imgUrl" />
							</div>
							<div v-if="index == 'en'">
								<el-card class="box-card"  shadow="never" v-if="item.tipsShow"  style="margin-bottom: 5px;background-color: #fbfbfb;">
								    <template #header>
								      <div class="card-header">
								        <span>Tips</span>
								      </div>
								    </template>
									<div>
											<p class="alert_p" v-for="(t,i) in item.tipsText">{{i+1}}. {{t}}</p>
									</div>
								  </el-card>
								<el-image v-if="item.imgShow && item.imgUrl" style="width: 100%; height: 200px"
									:src="item.imgUrl" />
							</div>
							<div v-if="index == 'vi'">
								<el-card class="box-card" shadow="never"  v-if="item.tipsShow"  style="margin-bottom: 5px;background-color: #fbfbfb;">
								    <template #header>
								      <div class="card-header">
								        <span>gợi ý</span>
								      </div>
								    </template>
									<div>
											<p class="alert_p" v-for="(t,i) in item.tipsText">{{i+1}}. {{t}}</p>
									</div>
								  </el-card>
								<el-image v-if="item.imgShow && item.imgUrl" style="width: 100%; height: 160px"
									:src="item.imgUrl" />
							</div>
							<div v-if="index == 'th'">
								<el-card class="box-card" shadow="never"  v-if="item.tipsShow"  style="margin-bottom: 5px;background-color: #fbfbfb;">
								    <template #header>
								      <div class="card-header">
								        <span>คำใบ้</span>
								      </div>
								    </template>
									<div>
											<p class="alert_p" v-for="(t,i) in item.tipsText">{{i+1}}. {{t}}</p>
									</div>
								  </el-card>
								<el-image v-if="item.imgShow && item.imgUrl" style="width: 100%; height: 160px"
									:src="item.imgUrl" />
							</div>
							<div v-if="index == 'br'">
								<el-card class="box-card"  shadow="never" v-if="item.tipsShow"  style="margin-bottom: 5px;background-color: #fbfbfb;">
								    <template #header>
								      <div class="card-header">
								        <span>dica</span>
								      </div>
								    </template>
									<div>
											<p class="alert_p" v-for="(t,i) in item.tipsText">{{i+1}}. {{t}}</p>
									</div>
								  </el-card>
								<el-image v-if="item.imgShow && item.imgUrl" style="width: 100%; height: 160px"
									:src="item.imgUrl" />
							</div>
						</div>
					</el-col>
				</el-row>
			</el-card>
		</div>
		<!-- 对话框 -->
		<el-dialog v-model="centerDialogVisible" title="修改属性" width="50%" center>
			<el-card style="margin-bottom: 10px;" shadow='never' header="选择要修改的属性">
				<el-row>
					<div>
						<el-radio-group v-model="radio1" size="small" @change="dialogRadioChang">
							<el-radio border v-for="(item,index) in headers" :key="index"
								:label="index">{{item['zh']}}</el-radio>
						</el-radio-group>
					</div>
				</el-row>
			</el-card>
			<el-card shadow='never' header="属性名称翻译" style="margin-bottom: 10px;">
				<el-row :gutter="4">
					<el-col style="margin-bottom: 10px;" :span="8"><el-input :disabled="radio1 ? false:true"
							v-model="defaultValue['zh']" :placeholder="'请输入修改后名称'">
							<template #prepend>修改成</template>
						</el-input></el-col>
					<el-col style="margin-bottom: 10px;" :span="8" v-for="(item,index) in languageList" :key="index">
						<el-input :disabled="radio1 ? false:true" v-model="defaultValue[item.value]"
							:placeholder="item.name+'翻译，不填默认不改'">
							<template #prepend>{{item.name}}</template>
						</el-input>
					</el-col>
				</el-row>
			</el-card>
			<el-descriptions class="margin-top" title="子属性" :column="1" border>
				<el-descriptions-item label="子表头">
					<el-input :disabled="radio1 ? false:true" v-model="defaultValue['children']"
						:placeholder="'请输入子表头名称，多个以，分割'">
					</el-input>
				</el-descriptions-item>
				<el-descriptions-item label="所在表格">
					<el-checkbox-group v-model="dialogCheckedTable" :disabled="radio1 ? false:true">
						<el-checkbox v-for="(item,index) in languageList" :key="index" :label="item.value" border>{{
					  item.name
					}}</el-checkbox>
					</el-checkbox-group>
				</el-descriptions-item>
			</el-descriptions>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogClose">Cancel</el-button>
					<el-button type="primary" @click="dialogSubmit">
						Confirm
					</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 对话框end -->

		<!-- 要生成的图片的内容区域 -->
		<div>
			<canvas class="content" id="myCanvas" style="visibility: hidden;">
			</canvas>
		</div>
		<div>
			<el-drawer v-model="drawer" @open="draweOpen" title="水印配置" direction="rtl" :modal="false"
				:lock-scroll="false" :before-close="handleClose">
				<el-divider>
					<span>水印内容</span>
				</el-divider>
				<div class="drawer_class">
					<el-radio-group v-model="wmRadio">
						<el-radio-button label="text">文字</el-radio-button>
						<el-radio-button label="img">图片</el-radio-button>
					</el-radio-group>
				</div>
				<div class="drawer_class">
					<el-input @input="wmcChange" v-model="textarea" :rows="2" type="textarea"
						placeholder="水印文字,多个用;或换行分割" v-if="wmRadio=='text'">
						<template #prepend>文字</template>
					</el-input>
					<el-input @change="wmcChange" v-model="drawerWatermarkConfig.image" placeholder="水印文字,多个用;分割"
						v-if="wmRadio=='img'">
						<template #prepend>图片地址</template>
					</el-input>
				</div>
				<div class="drawer_class">
					<el-row :gutter="25" class="drawer_class">
						<el-col :span="12">
							<span>字体大小</span>
							<el-slider @change="wmcChange" :max="100" :min="14" :step="1"
								v-model="drawerWatermarkConfig.fontSize" />
						</el-col>
						<el-col :span="12">
							<span>字体粗细</span>
							<el-slider @change="wmcChange" :max="1800" :min="100" :step="10"
								v-model="drawerWatermarkConfig.fontWeight" />
						</el-col>
					</el-row>
					<el-row :gutter="5" class="drawer_class">
						<el-col :span="12">
							<el-row>
								<el-col :span="8" style="margin-top: 3px;"><span>对齐方式</span></el-col>
								<el-col :span="16">
									<el-select @change="wmcChange" v-model="drawerWatermarkConfig.textAlign"
										placeholder="Select">
										<el-option label="center" value="center" />
										<el-option label="left" value="left" />
										<el-option label="right" value="right" />
										<el-option label="start" value="start" />
										<el-option label="end" value="end" />
									</el-select>
								</el-col>
							</el-row>
						</el-col>
						<el-col :span="12">
							<el-row>
								<el-col :span="8" style="margin-top: 3px;"><span>字体样式</span></el-col>
								<el-col :span="16">
									<el-select @change="wmcChange" v-model="drawerWatermarkConfig.fontStyle"
										placeholder="Select">
										<el-option label="正常" value="normal" />
										<el-option label="斜体" value="italics" />
									</el-select>
								</el-col>
							</el-row>
						</el-col>
					</el-row>
					<el-row :gutter="5" class="drawer_class">
						<el-col :span="16">
							<el-input v-model="drawerWatermarkConfig.fontFamily" placeholder="字体" @change="wmcChange">
								<template #prepend>字体</template>
							</el-input>
						</el-col>
						<el-col :span="8">
							<el-input v-model="drawerWatermarkConfig.fontColor" type="color" @change="wmcChange">
								<template #prepend>颜色</template>
							</el-input>
						</el-col>
					</el-row>
					<!-- <el-row :gutter="5" class="drawer_class">
						<el-col :span="24">
							<el-input @change="wmcChange" v-model="drawerWatermarkConfig.blindText" type="text" placeholder="盲水印文案">
								<template #prepend>盲水印</template>
							</el-input>
						</el-col>
						</el-row>
						<el-row :gutter="5" class="drawer_class">
						<el-col :span="24">
							<span>盲水印透明度</span>
							<el-slider @change="wmcChange" :max="0.02" :min="0.001" :step="0.001" v-model="drawerWatermarkConfig.blindOpacity" />
						</el-col>
					</el-row> -->
				</div>
				<el-divider>
					<span>水印样式</span>
				</el-divider>
				<div class="drawer_class">
					<div>
						<span>透明度</span>
						<el-slider @change="wmcChange" :max="1" :min="0" :step="0.01"
							v-model="drawerWatermarkConfig.opacity" />
					</div>
					<el-row :gutter="5" class="drawer_class">
						<el-col :span="12">
							<span>水印宽度</span>
							<el-slider @change="wmcChange" :max="150" :min="40" :step="5"
								v-model="drawerWatermarkConfig.width" />
						</el-col>
						<el-col :span="12">
							<span>水印高度</span>
							<el-slider @change="wmcChange" :max="100" :min="10" :step="5"
								v-model="drawerWatermarkConfig.height" />
						</el-col>
					</el-row>
					<el-row :gutter="5" class="drawer_class">
						<el-col :span="12">
							<span>水平偏移量</span>
							<el-slider @change="wmcChange" :max="10" :min="0" :step="1"
								v-model="drawerWatermarkConfig.offsetLeft" />
						</el-col>
						<el-col :span="12">
							<span>垂直偏移量</span>
							<el-slider @change="wmcChange" :max="10" :min="0" :step="1"
								v-model="drawerWatermarkConfig.offsetTop" />
						</el-col>
					</el-row>
					<el-row :gutter="5" class="drawer_class">
						<el-col :span="12">
							<span>水印水平间距</span>
							<el-slider @change="wmcChange" :max="1000" :min="50" :step="50"
								v-model="drawerWatermarkConfig.gapX" />
						</el-col>
						<el-col :span="12">
							<span>水印垂直间距</span>
							<el-slider @change="wmcChange" :max="1000" :min="50" :step="50"
								v-model="drawerWatermarkConfig.gapY" />
						</el-col>
					</el-row>
					<el-row :gutter="5" class="drawer_class">
						<el-col :span="12">
							<span>堆叠顺序</span>
							<el-slider @change="wmcChange" :max="1000" :min="80" :step="2"
								v-model="drawerWatermarkConfig.zIndex" />
						</el-col>
						<el-col :span="12">
							<span>旋转角度</span>
							<el-slider @change="wmcChange" :max="180" :min="-180" :step="2"
								v-model="drawerWatermarkConfig.rotate" />
						</el-col>
					</el-row>
				</div>
				<el-divider>
					<span>高级设置</span>
				</el-divider>
				<div class="drawer_class">
					<el-row :gutter="5" class="drawer_class">
						<el-col :span="12">
							<span>渲染模式</span>
							<el-radio-group @change="wmcChange" v-model="drawerWatermarkConfig.mode">
								<el-radio label="interval">错行展示</el-radio>
								<el-radio label="repeat">重复展示</el-radio>
							</el-radio-group>
						</el-col>
						<el-col :span="12">
							<span>开启保护模式</span>
							<el-switch @change="wmcChange" class="header-child_2"
								v-model="drawerWatermarkConfig.monitor" style="margin-left: 2px" :disabled="true"
								inline-prompt :active-icon="Check" :inactive-icon="Close" />
						</el-col>
					</el-row>
				</div>
			</el-drawer>
		</div>
	</div>
</template>
<script lang="ts" setup>
	import { onMounted, onUpdated, ref, reactive } from 'vue'
	import { ElMessage } from 'element-plus'
	import html2canvas from 'html2canvas'
	import JSZip from 'jszip'
	import { saveAs } from 'file-saver'
	import { Check, Close } from '@element-plus/icons-vue'
	import { Watermark } from '@pansy/watermark';

	//水印
	const watermarkConfig = {
		gapX: 100,//水印之间的水平间距
		gapY: 100,//水印之间的垂直间距
		offsetLeft: 0,//水印在 canvas 画布上绘制的水平偏移量
		offsetTop: 0,//水印在 canvas 画布上绘制的垂直偏移量
		width: 120,//单个水印宽度
		height: 64,//单个水印高度
		opacity: 0.19,//水印透明度
		rotate: -22,//旋转的角度
		fontSize: 26,//	设置字体大小
		fontStyle: 'normal',//规定字体样式
		fontVariant: 'normal',//规定字体变体
		fontWeight: 300,//设置字体粗细
		fontColor: '#000',//设置字体颜色
		fontFamily: 'sans-serif',
		textAlign: 'center',
		textBaseline: 'alphabetic',
		monitor: false,//是否开启保护模式
		zIndex: 99,
		mode: 'interval',
		pack: true,//是否使用水印组件包裹内容
		blindFontSize: 16,
		blindOpacity: 0.005,
		text: ['LULUTONGNIAN', "LADY'S CHIOSE"],
		blindText: 'LULUTONGNIAN 防盗水印',
		container: 'tw_main',
		image: '',//图片源
	}
	//抽屉水印样式
	const drawerWatermarkConfig = ref(watermarkConfig)
	//水印集合
	const watermarkList = ref({})
	//抽屉水印类型
	const wmRadio = ref('text')
	//抽屉，水印文字类型，文字值
	const textarea = ref('')
	//表头css
	const herderCss = ref({
		tw: {
			fontColor: '#ffffff',//表头字体颜色.默认黑色
			backgroundColor: '#000000',//表头背景色，默认白色
			textAlign: 'center',//字体位置，默认居中
		},
		en: {
			fontColor: '#ffffff',//表头字体颜色.默认黑色
			backgroundColor: '#000000',//表头背景色，默认白色
			textAlign: 'center',//字体位置，默认居中
		},
		vi: {
			fontColor: '#ffffff',//表头字体颜色.默认黑色
			backgroundColor: '#000000',//表头背景色，默认白色
			textAlign: 'center',//字体位置，默认居中
		},
		th: {
			fontColor: '#ffffff',//表头字体颜色.默认黑色
			backgroundColor: '#000000',//表头背景色，默认白色
			textAlign: 'center',//字体位置，默认居中
		},
		br: {
			fontColor: '#ffffff',//表头字体颜色.默认黑色
			backgroundColor: '#000000',//表头背景色，默认白色
			textAlign: 'center',//字体位置，默认居中
		}

	})
	//表格栏，表格选项值
	const headerSelectValue = ref('')
	//表格栏，背景值
	const tableBJ = ref('#000000')
	//表格栏，表头字体值
	const tableFontColor = ref('#ffffff')
	//表格栏，提示状态
	const tableTips = ref(true)
	//表格栏，图片状态
	const tableImg = ref(false)
	//表格栏，水印状态
	const tableWatermark = ref(true)
	//对话框
	const centerDialogVisible = ref(false)
	//弹窗单选值
	const radio1 = ref('')
	//尺码栏，尺码类型
	const sizeType = ref('clothSize')
	//储存值
	const defaultValue : any = ref('')
	//对话框多选值
	const dialogCheckedTable = ref([])
	//表头属性全选
	const checkAllHeader = ref(false)
	//尺码全选
	const checkAllSize = ref(false)
	//语言全选
	const checkAllLanguage = ref(false)
	const isIndeterminateHeader = ref(true)
	const isIndeterminateSize = ref(true)
	const isIndeterminateLanguage = ref(true)
	//表头属性默认值
	const checkedHeader = ref([
		'size'
	])
	//尺码默认值
	const checkedSize = ref(['S', 'M', 'L', 'XL'])
	//语言默认值
	const checkedLanguage = ref(['tw', 'en', 'vi'])
	//表头集合
	const headers = ref({
		size: {
			zh: '尺码',
			tw: '尺碼',
			en: 'SIZE',
			vi: 'kích cỡ(CM)',
			th: 'ขนาด(CM)',
			br: 'tamanho(CM)',
			disabled: true,//操作栏，选项状态
			isSet: false,//操作栏，已设置标志
			unit: '',//单位类型
			show: true,//是否显示
			children: [],//子表头
			isEdit: false,//编辑状态
			childShow: {//子表头是否显示
				zh: false,
				tw: false,
				en: false,
				vi: false,
				th: false,
				br: false,
			}
		},
		bust: {
			zh: '胸围',
			tw: '胸圍(CM)',
			en: 'BUST',
			vi: 'vòng ngực',
			th: 'รอบอก',
			br: 'circunferência do peito',
			disabled: false,
			isSet: false,
			unit: '',//单位类型
			show: false,
			isEdit: false,//编辑状态
			children: ['CM', 'INCH'],//子表头
			childShow: {//子表头是否显示
				zh: false,
				tw: false,
				en: true,
				vi: false,
				th: false,
				br: false,
			}
		},
		waist: {
			zh: '腰围',
			tw: '腰圍(CM)',
			en: 'WAIST',
			vi: 'vòng eo',
			th: 'รอบเอว',
			br: 'cintura',
			disabled: false,
			isSet: false,
			isEdit: false,//编辑状态
			unit: '',//单位类型
			show: false,
			children: ['CM', 'INCH'],//子表头
			childShow: {//子表头是否显示
				zh: false,
				tw: false,
				en: true,
				vi: false,
				th: false,
				br: false,
			}
		},
		length: {
			zh: '长度',
			tw: '長度(CM)',
			en: 'LENGTH',
			vi: 'chiều dài',
			th: 'ความยาว',
			br: 'comprimento',
			disabled: false,
			isSet: false,
			isEdit: false,//编辑状态
			unit: '',//单位类型
			show: false,
			children: ['CM', 'INCH'],//子表头
			childShow: {//子表头是否显示
				zh: false,
				tw: false,
				en: true,
				vi: false,
				th: false,
				br: false,
			}
		},
		shoulder: {
			zh: '肩宽',
			tw: '肩寬(CM)',
			en: 'SHOULDER',
			vi: 'chiều rộng vai',
			th: 'ความกว้างของไหล่',
			br: 'largura dos ombros',
			disabled: false,
			isSet: false,
			isEdit: false,//编辑状态
			unit: '',//单位类型
			show: false,
			children: ['CM', 'INCH'],//子表头
			childShow: {//子表头是否显示
				zh: false,
				tw: false,
				en: true,
				vi: false,
				th: false,
				br: false,
			}
		},
		sleeve: {
			zh: '袖长',
			tw: '袖長(CM)',
			en: 'SLEEVE',
			vi: 'Chiều dài tay áo',
			th: 'ความยาวแขนเสื้อ',
			br: 'comprimento da manga',
			disabled: false,
			isSet: false,
			isEdit: false,//编辑状态
			unit: '',//单位类型
			show: false,
			children: ['CM', 'INCH'],//子表头
			childShow: {//子表头是否显示
				zh: false,
				tw: false,
				en: true,
				vi: false,
				th: false,
				br: false,
			}
		},
		hipCircumference: {
			zh: '臀围',
			tw: '臀圍(CM)',
			en: 'HIP CIRCUMFERENCE',
			vi: 'vòng hông',
			th: 'รอบสะโพก',
			br: 'circunferência do quadril',
			disabled: false,
			isSet: false,
			isEdit: false,//编辑状态
			unit: '',//单位类型
			show: false,
			children: ['CM', 'INCH'],//子表头
			childShow: {//子表头是否显示
				zh: false,
				tw: false,
				en: true,
				vi: false,
				th: false,
				br: false,
			}
		},
		topLength: {
			zh: '上衣长',
			tw: '上衣長(CM)',
			en: 'TOP LENGTH',
			vi: 'chiều dài trên cùng',
			th: 'ความยาวด้านบน',
			br: 'comprimento superior',
			disabled: false,
			isSet: false,
			isEdit: false,//编辑状态
			unit: '',//单位类型
			show: false,
			children: ['CM', 'INCH'],//子表头
			childShow: {//子表头是否显示
				zh: false,
				tw: false,
				en: true,
				vi: false,
				th: false,
				br: false,
			}
		},
		pantLength: {
			zh: '裤长',
			tw: '褲長(CM)',
			en: 'PANT LENGTH',
			vi: 'chiều dài quần',
			th: 'ความยาวของกางเกง',
			br: 'comprimento da calça',
			disabled: false,
			isSet: false,
			isEdit: false,//编辑状态
			unit: '',//单位类型
			show: false,
			children: ['CM', 'INCH'],//子表头
			childShow: {//子表头是否显示
				zh: false,
				tw: false,
				en: true,
				vi: false,
				th: false,
				br: false,
			}
		},
		skirtLength: {
			zh: '裙长',
			tw: '裙長(CM)',
			en: 'SKIRT LENGTH',
			vi: 'Độ dài của váy',
			th: 'ความยาวกระโปรง',
			br: 'comprimento da saia',
			disabled: false,
			isSet: false,
			isEdit: false,//编辑状态
			unit: '',//单位类型
			show: false,
			children: ['CM', 'INCH'],//子表头
			childShow: {//子表头是否显示
				zh: false,
				tw: false,
				en: true,
				vi: false,
				th: false,
				br: false,
			}
		},
		weight: {
			zh: '建议体重',
			tw: '建議體重(KG)',
			en: 'WEIGHT',
			vi: 'cân nặng(KG)',
			th: 'น้ำหนัก(KG)',
			br: 'peso(KG)',
			disabled: false,
			isSet: false,
			isEdit: false,//编辑状态
			unit: 'weight',//单位类型
			show: false,
			children: ['KG', 'lb'],//子表头
			childShow: {//子表头是否显示
				zh: false,
				tw: false,
				en: true,
				vi: false,
				th: false,
				br: false,
			}
		},
	})

	//getList
	const getList = (obj : object) => {
		let o = {}
		Object.keys(headers.value).forEach((key) => {
			if (headers.value[key].show) {
				o[key] = headers.value[key]
			}
		})
		return o;
	}
	//要显示的列
	const headersList = ref(getList(headers))
	//语言选项
	const languageList = ref({
		tw: {
			id: 'tw_main',
			name: '繁体',
			value: 'tw',
			title: '尺碼信息',
			tipsShow: true,//温馨提示状态
			imgShow: false,//图片显示
			watermarkShow: true,//水印状态
			imgUrl: 'static/tw.png',//图片地址
			tipsText: ['本店所有商品均爲現貨'
				, '平面測量單位CM因測量方法不同,存在1-2cm誤差屬于正常範圍（試穿表僅供參考）'
				, '建議常溫水洗或者幹洗,洗滌溫度不得超過30攝氏度,不建議機洗,不能用力的拉扯否則容易造成衣服變形,自然風幹爲好'
				, '請勿使用洗滌劑浸泡過久或將洗衣液直接倒在衣物表面，洗衣液多含熒光劑，易造成局部褪色或泛黃'
				, '洗完後不宜用力擰幹，在通風陰涼處晾曬，不要在日光下暴曬，以免褪色'
				, '深色料子（黑色/紅色等）都會出現輕微的浮色，穿著時盡量避免與淺色衣物壹起搭配，洗滌時也要分開洗滌']
		},
		en: {
			id: 'en_main',
			name: '英文',
			value: 'en',
			title: 'SIZE INFORMATION',
			tipsShow: true,//温馨提示状态
			imgShow: false,//图片显示
			watermarkShow: true,//水印状态
			imgUrl: 'static/en.png',//图片地址
			tipsText: ['All products in this store are in stock'
				, ' Due to different measurement methods, the plane measurement unit CM has an error of 1-2cm, which is within the normal range (the try-on table is for reference only)'
				, 'It is recommended to wash at room temperature or dry clean.The washing temperature should not exceed 30 degrees Celsius. Machine washing is not recommended. Do not pull it hard or it will easily cause deformation of the clothes. It is better to air dry'
				, 'Do not soak in detergent for too long or pour the laundry detergent directly on the surface of the clothes. The laundry detergent contains fluorescent agents, which may cause local fading or yellowing'
				, 'After washing, it is not advisable to wring it dry. It should be dried in a cool and ventilated place. Do not expose it to sunlight to avoid fading'
				, 'Dark-colored materials (black/red, etc.) will have a slight floating color, try to avoid matching them with light-colored clothes when wearing them, and wash them separately when washing'],
		},
		vi: {
			id: 'vi_main',
			name: '越南',
			value: 'vi',
			title: 'thông tin kích thước',
			tipsShow: true,//温馨提示状态
			imgShow: false,//图片显示
			watermarkShow: true,//水印状态
			imgUrl: 'static/vi.png',//图片地址
			tipsText: ['Tất cả sản phẩm trong cửa hàng này đều có hàng'
				, 'Do các phương pháp đo khác nhau, đơn vị đo mặt phẳng CM có sai số 1-2cm, nằm trong phạm vi bình thường (bảng thử chỉ mang tính chất tham khảo)'
				, 'Nên giặt ở nhiệt độ phòng hoặc giặt khô. Nhiệt độ giặt không quá 30 độ C. Không nên giặt máy. Không kéo mạnh dễ gây biến dạng áo quần áo. Tốt hơn là nên phơi khô ngoài trời'
				, 'Không ngâm quá lâu trong bột giặt hoặc đổ trực tiếp bột giặt lên bề mặt quần áo. Bột giặt có chứa chất huỳnh quang, có thể gây phai màu hoặc ố vàng cục bộ'
				, 'Sau khi giặt không nên vắt khô mà nên phơi ở nơi thoáng mát,thoáng gió. Không phơi dưới ánh nắng mặt trời để tránh phai màu'
				, 'Chất liệu tối màu (đen/đỏ, v.v.) sẽ có màu hơi nổi, cố gắng tránh kết hợp với quần áo sáng màu khi mặc và giặt riêng khi giặt'],
		},
		th: {
			id: 'th_main',
			name: '泰语',
			value: 'th',
			title: 'ข้อมูลขนาด',
			tipsShow: true,//温馨提示状态
			imgShow: false,//图片显示
			watermarkShow: true,//水印状态
			imgUrl: '',//图片地址
			tipsText: ['สินค้าทั้งหมดในร้านนี้มีอยู่ในสต็อก'
				, 'เนื่องจากวิธีการวัดที่แตกต่างกัน หน่วยการวัดระนาบ CM จึงมีข้อผิดพลาด 1-2 ซม. ซึ่งอยู่ในช่วงปกติ(ตารางการลองสำหรับการอ้างอิงเท่านั้น)'
				, 'แนะนำให้ซักที่อุณหภูมิห้องหรือซักแห้ง อุณหภูมิในการซักไม่ควรเกิน 30 องศาเซลเซียส ไม่แนะนำให้ซักเครื่อง อย่าดึงแรงๆ มิฉะนั้นจะทำให้ผ้าเสียรูปทรงได้ง่าย เสื้อผ้า ควรผึ่งลมให้แห้ง'
				, 'อย่าแช่ผงซักฟอกนานเกินไปหรือเทน้ำยาซักผ้าลงบนพื้นผิวของเสื้อผ้าโดยตรง น้ำยาซักผ้าประกอบด้วยสารเรืองแสง ซึ่งอาจทำให้ผ้าซีดจางหรือเหลืองได้'
				, 'หลังซัก ไม่แนะนำให้บิดให้แห้ง ควรตากในที่เย็นและมีอากาศถ่ายเท อย่าให้โดนแสงแดดเพื่อไม่ให้สีซีดจาง'
				, 'วัสดุที่มีสีเข้ม (ดำ/แดง ฯลฯ) จะมีสีลอยเล็กน้อย พยายามหลีกเลี่ยงการจับคู่กับเสื้อผ้าสีอ่อนเมื่อสวมใส่ และแยกซักเมื่อซัก'],
		},
		br: {
			id: 'br_main',
			name: '葡萄牙语',
			value: 'br',
			title: 'informações de tamanho',
			tipsShow: true,//温馨提示状态
			imgShow: false,//图片显示
			watermarkShow: true,//水印状态
			imgUrl: 'static/br.png',//图片地址
			tipsText: ['Todos os produtos desta loja estão em estoque'
				, 'Devido a diferentes métodos de medição, a unidade de medição plana CM apresenta um erro de 1-2 cm, que está dentro da faixa normal (a tabela de teste é apenas para referência)'
				, 'Recomenda-se lavar em temperatura ambiente ou a seco. A temperatura de lavagem não deve exceder 30 graus Celsius. Lavar na máquina não é recomendado. Não puxe com força ou causará facilmente deformação de as roupas. É melhor secar ao ar'
				, 'Não mergulhe em detergente por muito tempo ou despeje o sabão em pó diretamente na superfície das roupas. O sabão em pó contém agentes fluorescentes, que podem causar desbotamento ou amarelamento local'
				, 'Após a lavagem, não é aconselhável torcer. Deve ser seco em local fresco e ventilado. Não expor ao sol para evitar o desbotamento'
				, 'Materiais de cores escuras (preto/vermelho, etc.) terão uma leve cor flutuante, tente evitar combiná-los com roupas de cores claras ao usá-los e lave-os separadamente ao lavar']
		}
	})
	//服装尺码
	const clothSize = [
		{
			size: 'S',
			isEdit: false,
		},
		{
			size: 'M',
			isEdit: false,
		},
		{
			size: 'L',
			isEdit: false,
		},
		{
			size: 'XL',
			isEdit: false,
		},
		{
			size: 'XXL',
			isEdit: false,
		},
		{
			size: 'XXXL',
			isEdit: false,
		},
		{
			size: 'XXXXL',
			isEdit: false,
		},
		{
			size: 'XXXXXL',
			isEdit: false,
		},
	]
	//童装尺码
	const childSize = [
		{
			size: '60',
			isEdit: false,
		},
		{
			size: '70',
			isEdit: false,
		},
		{
			size: '80',
			isEdit: false,
		},
		{
			size: '90',
			isEdit: false,
		},
		{
			size: '100',
			isEdit: false,
		},
		{
			size: '110',
			isEdit: false,
		},
		{
			size: '120',
			isEdit: false,
		},
		{
			size: '130',
			isEdit: false,
		},
		{
			size: '140',
			isEdit: false,
		},
		{
			size: '150',
			isEdit: false,
		},
		{
			size: '160',
			isEdit: false,
		},
		{
			size: '170',
			isEdit: false,
		}
	]
	//鞋码
	const shoseSize = [
		{
			size: '35',
			isEdit: false,
		},
		{
			size: '35.5',
			isEdit: false,
		},
		{
			size: '36',
			isEdit: false,
		},
		{
			size: '36.5',
			isEdit: false,
		},
		{
			size: '37',
			isEdit: false,
		},
		{
			size: '37.5',
			isEdit: false,
		},
		{
			size: '38',
			isEdit: false,
		},
		{
			size: '38.5',
			isEdit: false,
		},
		{
			size: '39',
			isEdit: false,
		},
		{
			size: '39.5',
			isEdit: false,
		},
		{
			size: '40',
			isEdit: false,
		},
		{
			size: '40.5',
			isEdit: false,
		},
		{
			size: '41',
			isEdit: false,
		},
		{
			size: '41.5',
			isEdit: false,
		},
		{
			size: '42',
			isEdit: false,
		},
		{
			size: '42.5',
			isEdit: false,
		},
		{
			size: '43',
			isEdit: false,
		},
		{
			size: '43.5',
			isEdit: false,
		},
		{
			size: '44',
			isEdit: false,
		},
		{
			size: '44.5',
			isEdit: false,
		},
		{
			size: '45',
			isEdit: false,
		},
		{
			size: '45.5',
			isEdit: false,
		},
	]
	//表格原始数据
	const sizesValue = ref(clothSize)
	//动态表格数据，用于存放表格数据
	const sizeList = ref([] as any[])
	//动态数据默认值
	sizeList.value = sizesValue.value.slice(0, 4)
	//显示表格
	const showLanguage = ref({
		tw: true,
		en: true,
		vi: true,
		th: false,
		br: false,
	});
	//用于显示
	const showLanguageValue = ref({
		tw: false,
		en: false,
		vi: false,
		th: false,
		br: false,
	});
	//操作栏，选项值
	const value_1 : any = ref('')
	//操作栏，初始值
	const value_2 = ref(0)
	//操作栏，初末值
	const value_3 = ref(0)
	//操作栏，递增值
	const value_4 = ref(0)
	//操作栏，递增选择,默认阶梯递增ladder，交替alternately
	const v4_select = ref('ladder')
	//操作栏是否显示单位
	const isUnit = ref(false)
	//操作栏，是否需要减半，除以2,默认需要
	const value_5 = ref(false)
	//操作栏，单位选项
	const v5_select = {
		weight: [
			{
				name: '斤',
				value: true
			},
			{
				name: '公斤',
				value: false
			}
		]
	}
	//操作栏，卡表标题选项默认值
	const radio = ref('单值')
	//操作栏，是否显示范围值
	const showRangeValue = ref(false)

	//抽屉状态
	const drawer = ref(false)

	//尺码类型改变
	const sizeTypeChange = () => {
		if (sizeType.value == 'clothSize') {
			sizesValue.value = clothSize
			checkedSize.value = ['S', 'M', 'L', 'XL']
		}
		if (sizeType.value == 'childSize') {
			sizesValue.value = childSize
			checkedSize.value = ['110', '120', '130', '140', '150', '160']
		}
		if (sizeType.value == 'shoseSize') {
			sizesValue.value = shoseSize
			checkedSize.value = ['36', '37', '38', '39', '40', '41']
		}
		let sl = []
		checkedSize.value.forEach(cs => {
			for (let i = 0; i < sizesValue.value.length; i++) {
				if (cs == sizesValue.value[i].size) {
					sl.push(sizesValue.value[i])
					continue;
				}
			}
		})
		sizeList.value = sl
	}
	//给表格行添加背景色
	const tableRowClassName = ({
		rowIndex,
	} : {
		rowIndex : number
	}) => {
		if (rowIndex % 2 == 1) {
			return 'warning-row'
		} else {
			return 'success-row'
		}
	}
	//表格栏，选项变化
	const tableSelectChange = () => {
		let hsv = headerSelectValue.value
		//已选择
		if (hsv) {
			tableBJ.value = herderCss.value[hsv.value].backgroundColor
			tableFontColor.value = herderCss.value[hsv.value].fontColor
			tableImg.value = languageList.value[hsv.value].imgShow
			tableTips.value = languageList.value[hsv.value].tipsShow
		} else {
			tableBJ.value = '#ffffff'
			tableFontColor.value = '#000000'
			tableImg.value = true
			tableTips.value = true
		}
	}
	//表格配置变化
	const tableStyleChange = () => {
		let hsv = headerSelectValue.value
		//表格选择，默认全部
		if (hsv) {
			herderCss.value[hsv.value].fontColor = tableFontColor.value
			herderCss.value[hsv.value].backgroundColor = tableBJ.value
			languageList.value[hsv.value].tipsShow = tableTips.value
			languageList.value[hsv.value].imgShow = tableImg.value
		} else {//全部改变
			for (let i in showLanguage.value) {
				herderCss.value[i].fontColor = tableFontColor.value
				herderCss.value[i].backgroundColor = tableBJ.value
				languageList.value[i].tipsShow = tableTips.value
				languageList.value[i].imgShow = tableImg.value
			}
		}
	}
	//水印状态
	const tableWatermarkStateChange = () => {
		let hsv = headerSelectValue.value
		let val = JSON.parse(JSON.stringify(showLanguage.value))
		//表格选择，默认全部
		if (hsv) {
			languageList.value[hsv.value].watermarkShow = tableWatermark.value
			if (watermarkList.value[hsv.value] && tableWatermark.value) {
				watermarkList.value[hsv.value].show();
			} else {
				watermarkList.value[hsv.value].hide();
			}

		} else {//全部改变
			for (let i in val) {
				languageList.value[i].watermarkShow = tableWatermark.value
				if (val[i]) {
					if (watermarkList.value[i] && tableWatermark.value) {
						watermarkList.value[i].show();
					} else {
						watermarkList.value[i].hide();
					}
				}
			}
		}
		// Object.keys(val).forEach((v)=>{
		// 	console.log(hsv)
		// 	if(val[v]){
		// 		if(tableWatermark.value){

		// 			if(wmlist[v]){
		// 				watermarkList.value[v].show();
		// 			}else{
		// 				let wmc = JSON.parse(JSON.stringify(watermarkConfig))
		// 				wmc['container'] = languageList.value[v].id
		// 				watermarkList.value[v] = new Watermark(wmc);
		// 				watermarkList.value[v].show();
		// 			}
		// 		}else{
		// 			console.log(1111)
		// 			if(wmlist[v]){
		// 				watermarkList.value[v].show();
		// 			}else{
		// 				let wmc = JSON.parse(JSON.stringify(watermarkConfig))
		// 				wmc['container'] = languageList.value[v].id
		// 				watermarkList.value[v] = new Watermark(wmc);
		// 				watermarkList.value[v].show();
		// 			}
		// 		}

		// 	}else{
		// 		if(watermarkList.value[v]){
		// 			watermarkList.value[v].hide();
		// 		}
		// 	}
		// })
	}
	//抽屉打开时回调方法
	const draweOpen = () => {
		let text = ''
		drawerWatermarkConfig.value.text.forEach((t) => {
			text = text + ';' + t
		})
		textarea.value = text.substring(1)
	}
	//表头
	const handleCheckAllChangeHeader = (val : boolean) => {
		let array = [] as any[]
		if (val) {
			for (let key in headers.value) {
				array.push(key)
			}
		} else {
			array.push('size')
		}
		checkedHeader.value = array
		isIndeterminateHeader.value = false
		isShowColumn(array)
	}
	const handleCheckedHeaderChange = (value : string[]) => {
		const checkedCountHeader = value.length
		checkAllHeader.value = checkedCountHeader === Object.keys(headers).length;
		isIndeterminateHeader.value = checkedCountHeader > 0 && checkedCountHeader < Object.keys(headers).length
		isShowColumn(value)
	}
	//尺码
	const handleCheckAllChangeSize = (val : boolean) => {
		let array = [] as any[]
		if (val) {
			sizesValue.value.forEach(s => {
				array.push(s.size)
			})
		} else {
			array.push(sizesValue.value[0].size)
		}
		checkedSize.value = array
		isIndeterminateSize.value = false
		deleteRow(array)
	}
	const handleCheckedSizeChange = (value : string[]) => {
		const checkedCountSize = value.length
		checkAllSize.value = checkedCountSize === sizesValue.value.length;
		isIndeterminateSize.value = checkedCountSize > 0 && checkedCountSize < sizesValue.value.length
		deleteRow(value)
	}
	//语言
	const handleCheckAllChangeLanguage = (val : boolean) => {
		let array = [] as any[]
		if (val) {
			for (let key in languageList.value) {
				array.push(key)
			}
		} else {
			array.push('tw')
		}
		checkedLanguage.value = array
		isIndeterminateLanguage.value = false
		isShowTable(array)
	}
	const handleCheckedLanguageChange = (value : string[]) => {
		const checkedCountLanguage = value.length
		checkAllLanguage.value = checkedCountLanguage === Object.keys(languageList.value).length;
		isIndeterminateLanguage.value = checkedCountLanguage > 0 && checkedCountLanguage < Object.keys(languageList.value).length
		isShowTable(value)
	}
	// 打开信息编辑
	const openEditColumn = function (row, column, cell, event) {
		sizesValue.value.forEach(item => {
			// 激活当前点击的单元格进入可以编辑（span与el-input标签显示隐藏切换）
			// item.isEdit = true
			item.isEdit = false
		})
		row.isEdit = true
	}
	// 表格数据编辑保存并关闭编辑
	const editColumnData = function (row : any) {
		// 关闭表格编辑
		sizesValue.value.forEach(item => {
			if (item.size === row.size) {
				// 激活当前点击的单元格进入可以编辑（span与el-input标签显示隐藏切换）
				row.isEdit = false
			}
		})
	}
	//对话框提交
	const dialogSubmit = () => {
		Object.keys(headers.value).forEach((h) => {
			if (h == radio1.value) {
				headers.value[h] = defaultValue._rawValue
				if (dialogCheckedTable.value.length > 0) {
					let childShow = headers.value[h].childShow
					Object.keys(childShow).forEach((c) => {
						headers.value[h].childShow[c] = false
					})
					dialogCheckedTable.value.forEach((d) => {
						headers.value[h].childShow[d] = true
					})
				}
			}
		})
		centerDialogVisible.value = false
		radio1.value = ''
		dialogCheckedTable.value = []
		defaultValue.value = ''

	}
	//关闭对话框
	const dialogClose = () => {
		defaultValue.value = ''
		centerDialogVisible.value = false
		radio1.value = ''
		dialogCheckedTable.value = []
	}
	//对话框，单选值改变
	const dialogRadioChang = function (val : any) {
		defaultValue.value = headers.value[val]
	}
	//删除当前行,尺码
	const deleteRow = (row : any) => {
		sizeList.value = sizesValue.value.filter((s) => {
			let flag = false
			//如果不一致，则保留该行
			for (let i = 0; i < row.length; i++) {
				if (s.size == row[i]) {
					flag = true
					break
				}
			}
			return flag
		})
	}
	//显示隐藏列
	const isShowColumn = (col : string[]) => {
		//如果一致，则保留该列
		Object.keys(headers.value).forEach((h) => {
			headers.value[h].show = false
		})
		col.forEach((c) => {
			headers.value[c].show = true
		})
		headersList.value = getList(headers)
	}
	//表格显示
	const isShowTable = (arr : any) => {
		let val = JSON.parse(JSON.stringify(showLanguageValue.value))
		let wmlist = JSON.parse(JSON.stringify(watermarkList.value))
		arr.forEach((c) => {
			val[c] = true
		})
		showLanguage.value = val
		//延迟加载水印
		setTimeout(function () {
			Object.keys(val).forEach((v) => {
				if (val[v] && tableWatermark.value) {
					if (wmlist[v]) {
						watermarkList.value[v].show();
					} else {
						let wmc = JSON.parse(JSON.stringify(watermarkConfig))
						wmc['container'] = languageList.value[v].id
						watermarkList.value[v] = new Watermark(wmc);
						watermarkList.value[v].show();
					}
				} else {
					if (watermarkList.value[v]) {
						watermarkList.value[v].hide();
					}
				}
			})
		}, 1000)
	}
	//转变图片下载
	const generateImages = (id : any) => {
		let dom = document.querySelector('#' + id) as HTMLElement
		let ele = document.querySelector('.content') as HTMLElement
		// let r = getXY(dom)
		// let textArr = [
		// 	{
		// 		text: "LULUTONGNIAN",
		// 		font: "60px Georgia",
		// 		fillStyle: "rgba(170, 0, 127, 0.1)",
		// 	},
		// 	{
		// 		text: "Lady's Choice",
		// 		font: "60px Georgia",
		// 		fillStyle: "rgba(170, 0, 127, 0.1)",
		// 	}
		// ]
		html2canvas(dom, {
			useCORS: true,
			backgroundColor: "#FFFFFF",
			scale: 2, // 处理模糊问题
		}).then(canvas => {
			// for (let i = 0; i < textArr.length; i++) {
			// 	let ctx:any = canvas.getContext('2d');
			// 	let width = canvas.width / 8;
			// 	let height = canvas.height / 8;
			// 	let x = r.x + width - 50;  // 页面中点
			// 	let y = r.y + height;  // 页面下方 
			// 	ctx.font = textArr[i].font;
			// 	ctx.fillStyle = textArr[i].fillStyle;
			// 	ctx.fillText(textArr[i].text, x, y + i * 90);
			// }
			const imgUrl = canvas.toDataURL('image/jpg', 1.0)
			const image = document.createElement('img')
			image.src = imgUrl
			// 将生成的图片放到 类名为 content 的元素中
			ele.appendChild(image)
			const a = document.createElement('a')
			a.href = imgUrl
			// a.download 后面的内容为自定义图片的名称
			a.download = id + '.jpg'
			a.click()
		})
		ele.innerHTML = ''
	}
	//获取坐标
	const getXY = (obj : any) => {
		let x = 0, y = 0;
		if (obj.getBoundingClientRect) {
			let box = obj.getBoundingClientRect();
			let D = document.documentElement;
			x = box.left + Math.max(D.scrollLeft, document.body.scrollLeft) - D.clientLeft;
			y = box.top + Math.max(D.scrollTop, document.body.scrollTop) - D.clientTop
		}
		else {
			for (; obj != document.body; x += obj.offsetLeft, y += obj.offsetTop, obj = obj.offsetParent) { }
		}
		return {
			x: x,
			y: y
		}
	}
	//操作栏单选框改变
	const rodioChange = (val : any) => {
		if (val == '单值') {
			showRangeValue.value = false
		}
		if (val == '范围值') {
			showRangeValue.value = true
		}
	}
	//操作栏，设置按钮方法
	const setBtnClick = () => {
		let dom : any = document.getElementById('set_data')
		//判断是否选择选项
		if (!value_1.value) {
			openMessage('请选择要设置的属性', 'error')
			dom.classList.add('caozuolan_error')
			return
		}
		//判断初始值
		if (!(value_2.value >= 0)) {
			openMessage('请填写初始值', 'error')
			dom.classList.add('caozuolan_error')
			return
		}
		//判断初末值
		if (radio.value == '范围值' && !(value_3.value >= 0)) {
			openMessage('请填写初末值', 'error')
			dom.classList.add('caozuolan_error')
			return
		}
		//判断递增值
		if (!(value_4.value >= 0)) {
			openMessage('请填写递增值', 'error')
			dom.classList.add('caozuolan_error')
			return
		}

		dom.classList.remove('caozuolan_error')
		for (let key in headersList.value) {
			if (key == value_1.value) {
				if (radio.value == '范围值') {
					//中间值
					let val = 0
					//范围值1
					let val_1 = 0
					//范围值2
					let val_2 = 0
					for (let j = 0; j < sizeList.value.length; j++) {
						//交替递增
						if (v4_select.value == 'alternately') {
							val_1 = Number(value_2.value) + Number(j * value_4.value)
							val_2 = Number(value_4.value) * Number(j) + Number(value_3.value)
							//是否减半，除以2
							if (value_5.value) {
								sizeList.value[j][key] = (val_1 / 2).toFixed(0) + "-" + (val_2 / 2).toFixed(0)
							} else {
								sizeList.value[j][key] = val_1 + "-" + val_2
							}
						}
						//阶梯递增
						if (v4_select.value == 'ladder') {
							val_1 = val_2
							if (j == 0) {
								val_1 = Number(value_2.value) + Number(j * value_4.value)
							}
							val_2 = +Number(value_4.value) * Number(j) + Number(value_3.value)

							//是否减半，除以2
							if (value_5.value) {
								sizeList.value[j][key] = (val_1 / 2).toFixed(0) + "-" + (val_2 / 2).toFixed(0)
							} else {
								sizeList.value[j][key] = val_1 + "-" + val_2
							}
						}
					}
				} else {
					for (let j = 0; j < sizeList.value.length; j++) {
						sizeList.value[j][key] = Number(value_2.value) + Number(j * value_4.value)
						//是否减半，除以2
						if (value_5.value) {
							sizeList.value[j][key] = (sizeList.value[j][key] / 2).toFixed(0)
						}
					}
				}
				headersList.value[key].isSet = true
				openMessage(headersList.value[key].zh + '设置成功', 'success')
				break
			}
		}


	}
	//操作栏，选项选择
	const setSelect = (val : any) => {
		value_2.value = 0
		value_3.value = 0
		value_4.value = 0
		radio.value = "单值"
		showRangeValue.value = false
		v4_select.value = 'ladder'
		if (headersList.value[val].unit) {
			isUnit.value = true
		} else {
			isUnit.value = false
			value_5.value = false
		}
	}
	//操作栏，重置所有
	const reset = () => {
		window.location.reload()
	}
	//厘米转换英寸，1英寸=2.54厘米
	const cmConvertInch = (val : any) => {
		let rs = ''
		if (val) {
			//判断是否为范围值，有“-”说明是范围值
			if (typeof (val) == 'string' && val.indexOf('-') > -1) {
				let arr = val.split('-')
				if (Number(arr[0]) && Number(arr[1])) {
					let a1 = (Number(arr[0]) / 2.54).toFixed(1);
					let a2 = (Number(arr[1]) / 2.54).toFixed(1);
					rs = a1 + "-" + a2
				} else {
					rs = val
				}
			} else {
				if (Number(val)) {
					rs = (Number(val) / 2.54).toFixed(1)
				} else {
					rs = val
				}
			}

		}
		return rs
	}
	//千克转换磅，1kg=2.2磅,范围值
	const kgConvertIB = (val : any) => {
		let rs = ''
		if (val) {
			//判断是否为范围值，有“-”说明是范围值
			if (typeof (val) == 'string' && val.indexOf('-') > -1) {
				let arr = val.split('-')
				if (Number(arr[0]) && Number(arr[1])) {
					let a1 = (Number(arr[0]) * 2.2).toFixed(0);
					let a2 = (Number(arr[1]) * 2.2).toFixed(0);
					rs = a1 + "-" + a2
				} else {
					rs = val
				}
			} else {
				if (Number(val)) {
					rs = (Number(val) * 2.2).toFixed(0)
				} else {
					rs = val
				}
			}

		}
		return rs
	}
	//单位转换
	const unitConversion = (val : any, unitName : string) => {
		if (unitName == 'KG') {
			return kgConvertIB(val)
		}
		if (unitName == 'CM') {
			return cmConvertInch(val)
		}
	}
	const allDownload = () => {
		// let textArr = [
		// 	{
		// 		text: "LULUTONGNIAN",
		// 		font: "60px Georgia",
		// 		fillStyle: "rgba(170, 0, 127, 0.1)",
		// 	},
		// 	{
		// 		text: "Lady's Choice",
		// 		font: "60px Georgia",
		// 		fillStyle: "rgba(170, 0, 127, 0.1)",
		// 	}
		// ]
		//已显示的表格
		var tables = []
		Object.keys(showLanguage.value).forEach((v) => {
			if (showLanguage.value[v]) {
				var tm = document.querySelector("#" + v + "_main")
				tables.push(tm)
			}
		})
		const zip = new JSZip()
		var promises = [...tables].map(table => {
			return html2canvas(table, {
				backgroundColor: "#FFFFFF",
				scale: 2, // 处理模糊问题
			})
				.then(canvas => {
					// let r = getXY(table)
					// for (let i = 0; i < textArr.length; i++) {
					// 	let ctx:any = canvas.getContext('2d');
					// 	let width = canvas.width / 8;
					// 	let height = canvas.height / 8;
					// 	let x = r.x + width - 50;  // 页面中点
					// 	let y = r.y + height;  // 页面下方 
					// 	ctx.font = textArr[i].font;
					// 	ctx.fillStyle = textArr[i].fillStyle;
					// 	ctx.fillText(textArr[i].text, x, y + i * 90);
					// }
					var imgData = canvas.toDataURL('image/jpg')
					zip.file(table.id + ".png", imgData.replace(/^data:image\/(png|jpg);base64,/, ""), { base64: true });
				});
		});

		Promise.all(promises).then(() => {
			const zipString = zip.generateAsync({ type: 'blob' }).then(function (blob) {
				saveAs(blob, "size.zip");
			});
		})
	}
	//水印配置变化
	const wmcChange = () => {
		if (textarea.value) {
			let arr = textarea.value.split(/[\n+；;]/g)
			drawerWatermarkConfig.value.text = arr
		}
		//只改变选择项
		if (headerSelectValue.value) {
			let wmc = JSON.parse(JSON.stringify(drawerWatermarkConfig.value))
			wmc['container'] = headerSelectValue.value.id
			watermarkList.value[headerSelectValue.value.value].update(wmc);
		} else {//全部改变
			for (let i in showLanguage.value) {
				if (showLanguage.value[i]) {
					let wmc = JSON.parse(JSON.stringify(drawerWatermarkConfig.value))
					wmc['container'] = languageList.value[i].id
					watermarkList.value[i].update(wmc);
				}
			}
		}
	}
	//消息提示
	const openMessage = (msg : string, type : any) => {
		ElMessage({
			message: msg,
			type: type,
			duration: 2000
		})
	}
	onMounted(() => {
		Object.keys(checkedLanguage.value).forEach((cl) => {
			let c = checkedLanguage.value[cl]
			let wmc = JSON.parse(JSON.stringify(watermarkConfig))
			wmc['container'] = languageList.value[c].id
			watermarkList.value[c] = new Watermark(wmc);
			watermarkList.value[c].show();
		})
	})
</script>
<style scoped>
	:deep(.el-input-group__prepend) {
		padding-left: 5px;
		padding-right: 5px;
	}

	:deep(.el-table) {
		--el-table-border-color: #dcdfe6;
	}
</style>
<style>
	.container {
		margin-left: 10px;
		margin-right: 10px;
	}

	.header {
		margin-bottom: 10px;
	}

	.header_1 {
		margin: 5px;
	}

	.header_2 {
		margin: 5px;
	}

	.header_3 {
		margin: 5px;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.card-header_1 {
		display: flex;
		justify-content: start;
		align-items: center;
	}

	.card-header-child {
		margin-left: 5px;
	}

	.header-child {
		position: relative;
		width: 100%;
		font-size: 14px;
		margin-left: 25px;
		height: 29px;
		text-align: center;
		border: #dcdfe6 solid 1px;
		border-radius: 4px;
	}

	.header-child_1 {
		background-color: #f5f7fa;
		border-right: #dcdfe6 solid 1px;
	}

	.header-child_2 {
		margin-right: 5px;
	}

	.check_all {
		margin-right: 15px !important;
	}

	.main_1 {
		width: 800px;
	}

	.main_2 {
		width: 800px;
	}

	.caozuolan_error {
		border-color: #ff0000 !important;
	}

	.alert_p {
		text-align: start;
		margin-top: 3px;
		margin-bottom: 3px;
		/* color: black; */
	}

	.drawer_class {
		margin-bottom: 10px;
	}

	.unit_select div.el-input__wrapper {
		background-color: #f5f7fa !important;
	}

	.el-table .warning-row {
		--el-table-tr-bg-color: var(--el-color-warning-light-9);
	}

	.el-table .success-row {
		--el-table-tr-bg-color: var(--el-color-success-light-9);
	}
</style>